<template>
    <div>
        <div v-show="start">
            <div>
                <p>京东秒杀<span style="background-color: red; color: #fff; margin-left: 20px;">8点场</span><span
                        style="background-color:  #fff; color: red;margin-right: 20px; display: inline-block;border: solid  1px red;">01:40:<span>{{ time }}</span></span>发现好物
                </p>
                <img src="../views/img/首页_02.jpg" alt="" style="width: 100%;">
            </div>
            <div style="column-count: 4; ">
                <div style="width: 90%;
        height: 100px; margin-top: -20px;">
                    <h4>品牌秒杀</h4>
                    <h6 style="color: orange; margin-top: -15px;">品质好物秒</h6>
                </div>
                <div style="width: 90%;
        height: 100px;">
                    <h4>品类秒杀</h4>
                    <h6 style="color: crimson; margin-top: -15px;">低至1588</h6>
                </div>
                <div style="width: 90%;
        height: 100px;">
                    <h4>新品首发</h4>
                    <h6 style="color: aqua; margin-top: -15px;">华为智慧屏</h6>
                </div>
                <div style="width: 90%;
        height: 100px;">
                    <h4>排行榜</h4>
                    <h6 style="color: darkviolet; margin-top: -15px;">跟榜购好物</h6>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const start=ref(true)
const time=ref(30)
let timer;
timer=setInterval(() => {
    time.value--
    if(time.value==0){
        clearInterval(timer)
        start.value=false
    }
}, 1000);
</script>

<style lang="scss" scoped></style>